<template>
	<view class="page-user">
		<view class="user-section">
			<view class="info_box">
				<view class="bg">
					<!-- <image class="image" src="../../static/bg.png"></image> -->
				</view>


				<view class=" flex justify-start align-center text-white" style="background-color: #fff;"
					:style="[{height: CustomBar+'px','paddingTop': StatusBar+'px'}]">
					<view class="header-title">
						<view class="cuIcon-back header-left " @click="back"></view>
						<view class="header-center">商户资产</view>
						<!-- this.$urouter.navigateTo('/pages/user/wallet/withdraw-detail/index'); -->
						<view class="header-right"></view>
					</view>
				</view>
				<view class="page-header"
					style="background-color: #fff;border-radius: 20rpx;margin:10rpx auto ; width: 95%;">
					<!-- <image src="../../../../static/home-bg.png" mode="widthFix" class="bg-img"></image> -->
					<view class="header-info flex ">
						<view class="shop-logo flex justify-center">
							<view class="img">
								<fu-image :src="shopLogo" errorImg="/static/logo.png" mode="aspectFill">
								</fu-image>
							</view>
						</view>
						<view class="flex flex-direction text-white" style="padding-top:24rpx ;">
							<view class="flex align-center">
								<text class="shop-name text-bold flex-sub ">{{shopName}}</text>
								<!-- <text class="level flex align-center justify-center">{{level_name}}</text> -->
							</view>

							<text class="text-sm margin-top-xs color-text">交易:{{uid}}</text>
						</view>
					</view>
				</view>
				<view class="general-view margin-lr margin-tp  bg-white padding radius-16"
					style="background-color: rgb(255, 255, 255); border-radius: 10px; margin: 5px auto; width: 95%;">
					<view class="flex justify-between align-center">
						<!-- <text>
							<view class="text-333">当前账户余额</view>
							<view class="text-333 text-xl  margin-top-sm"
								style="font-size: 60rpx;    font-weight: 500;">
								￥{{money.now_money}}</view>
						</text> -->
						<!-- 	<view class="flex">
							<view @click="to_tixian()">去提现 ></view> 
						</view> -->
					</view>
					<view class="flex" style="background: #F6F8FA;margin-top:36rpx;border-radius:12rpx;">
						<view class="flex flex-direction flex-sub text-center margin-top">
							<text class="text-sm">当前账户余额</text>
							<text class="text-333 text-xl  margin-top-sm">{{money.now_money?money.now_money:'0.00'}}</text>
						</view>
						<!-- <view class="flex flex-direction flex-sub text-center margin-top">
							<text class="text-sm">保证金</text>
							<text class="text-333 text-xl  margin-top-sm">{{money.stay_money}}</text>
						</view> -->
						<view class="flex flex-direction flex-sub text-center margin-top">
							<text class="text-sm">未入账</text>
							<text class="text-333 text-xl  margin-top-sm">{{money.freeze_money?money.freeze_money:'0.00'}}</text>
						</view>
						<!-- <view class="flex flex-direction flex-sub text-center margin-top">
							<text class="text-sm">可提现</text>
							<text
								class="text-333 text-xl  margin-top-sm">{{money.now_money}}</text>
						</view> -->
					</view>

					<!-- <view style="width: 100%;height: 90rpx;background: linear-gradient( 180deg, #FC6296 0%, #FC6296 100%);border-radius: 14rpx;text-align: center;line-height: 90rpx;color: #fff;font-size: 32rpx;margin: 10rpx auto;" @click="to_tixian()">立即提现 </view> -->
					<!-- <view style="width: 100%;height: 90rpx;border-radius: 14rpx;text-align: center;line-height: 90rpx;color: #4E8CEE;font-size: 32rpx;margin: 10rpx auto;" @click="handleRefund()">申请退保证金 </view> -->
				
				</view>

			</view>
			<view class="detaiLiat" style="width: 95%;margin: 0 auto;border-radius:12rpx;">
				<!-- <view class="box-center flex justify-between">
          <view class="left_main">账户记录</view>
          <view class="right_main" @click="handleJump" data-url="/pages/user/wallet/consumer-detail/index">查看全部</view>
        </view> -->
				<scroll-view v-if="list.length>0" scroll-y :style="{height: 'calc(100vh - 490rpx)'}">
					<view class="list">
						<view class="ongg" v-for='(item,index) in list' :key='index'>
							<view class="buy-left">
								<view class="share-right" style="overflow: hidden;">
									<view class="text-cut-2 desc">
										{{ item.remark }}
									</view>
									<view class="create_time">
										{{ item.create_time | timeDate }}
									</view>
								</view>
							</view>
							<view class="price-right">
								<!-- <view style="font-size: 13px;color: #000000; margin-bottom: 20rpx;">
									<text v-if="item.is_delete == 0">未入账</text>
									<text v-if="item.is_delete == 1">到账</text>
								</view> -->
								<view style="font-size: 20px;color: #000000;"> {{ item.change_money }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 空布局 start-->
				<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
				<!-- 空布局 end-->


			</view>
		</view>

		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			// return {
			// 	CustomBar: this.CustomBar,
			// 	StatusBar: this.StatusBar,
			// 	money: '', //余额
			// 	list: [],
			// 	isInit: false,
			// 	currentPage: 1,
			// 	currentPageSize: 10,
			// 	isMore: false
			// };
			return {
				uid: 0,
				shopLogo: '', //店铺logo
				shopName: '1111', //店铺名称
				certification_status: '',
				store_star: '',
				tabType: 'day',
				store_status: '',
				main_industry: '',
				level_name: '',
				expiration_time: '',
				orderStatistics: '',
				order: '',
				money: [],
				tabList: [{
						name: '今日',
						type: 'day'
					},
					{
						name: '昨日',
						type: 'yesterday'
					}, {
						name: '总计',
						type: 'total'
					}
				],
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				money: '', //余额
				list: [],
				isInit: false,
				currentPage: 1,
				currentPageSize: 10,
				isMore: false
			};
		},
		onLoad(options) {

		},
		onShow() {
			this.list = [];
			// this.getMoney();
			this.getMoneyList();
			if (global.token) {
				this.getShopInfo();
				this.getMoney()
				this.$refs.one && this.$refs.one.getPageDataStatistics()
				this.$refs.one && this.$refs.two.getPageDataStatistics()
			} else {
				this.$util.navigateToLogin();
			}
		},
		onReachBottom() {
			this.getMoneyList()
		},
		filters:{
			timeDate(value){
				let timess = value *1000
				const date = new Date(timess);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				const hours = ('0' + date.getHours()).slice(-2);
				const minutes = ('0' + date.getMinutes()).slice(-2);
				const seconds = ('0' + date.getSeconds()).slice(-2);
				
				const time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
				return time;
			}
		},
		computed: {
			// listReverse() {
			//   return this.list.reverse();
			// },
			headerHight() {
				let h = 'calc(900rpx + ' + this.StatusBar + 'px)';
				console.log('xxxxxxxxx', h)
				return h;
			},

		},
		methods: {
			// 方法一：使用内置的 Date 对象
			timestampToTime(timestamp) {
			  const date = new Date(timestamp);
			  const year = date.getFullYear();
			  const month = ('0' + (date.getMonth() + 1)).slice(-2);
			  const day = ('0' + date.getDate()).slice(-2);
			  const hours = ('0' + date.getHours()).slice(-2);
			  const minutes = ('0' + date.getMinutes()).slice(-2);
			  const seconds = ('0' + date.getSeconds()).slice(-2);
			  
			  const time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			  return time;
			},
			handleRefund() {
				console.log('iii')
				this.$util.showModal({
				  title: '提示',
				  content: '确定下架所有商品并关闭店铺？',
				  confirmColor: this.$store.state.themeColor,
				  success: res => {
				    if (res.confirm) {
				      // that.$store.commit('logout');
				      // uni.navigateBack();
				      // that.$store.dispatch('getCartList');
							uni.navigateTo({
								url: '/pages/user/wallet/card-bind/refund'
							})
				    }
				  }
				});
			},
			to_tixian() {
				uni.navigateTo({
					url: '/pages/user/wallet/withdraw/index'
				})
			},
			// 金额明细
			getMoneyList() {
				this.isInit = false
				if (this.isMore) return
				this.$api.post(global.apiUrls.getPaymentDetails, {
						page: this.currentPage,
						list_rows: this.currentPageSize
					})
					.then(res => {
						this.isInit = true
						console.log('消费明细', res)
						if (res.data.code == 1 && res.data.data.data.length != 0) {
							if (this.currentPage == 1) this.list = [];
							this.list = this.list.concat(res.data.data.data);
							if (res.data.data.data.length == this.currentPageSize) {
								this.currentPage++;
							} else {
								this.isMore = false;
							}
						}
					})
					.catch(err => {
						this.isInit = true
						console.log(err)
					})
			},
			back() {
				uni.navigateBack();
			},
			// getMoney() {
			// 	let _this = this;
			// 	_this.$api.post(global.apiUrls.getMerchantMoney, {
			// 		partner_id: this.$store.state.userInfo.id
			// 	}).then(res => {
			// 		if (res.data.code == 1) {
			// 			_this.money = res.data.data.now_money;
			// 		}
			// 	}).catch(err => {
			// 		console.log(err, 'get_my_money')
			// 	})
			// }
			//获取店铺金额
			getMoney() {
				let _this = this;
				_this.$api.post(global.apiUrls.getMerchantMoney, {
					partner_id: this.$store.state.userInfo.id
				}).then(res => {
					if (res.data.code == 1) {
						_this.money = res.data.data;
					}
				}).catch(err => {
					console.log(err, 'get_my_money')
				})
			},
			/**
			 * @description 获取店铺信息
			 */
			getShopInfo() {
				this.$api.post(global.apiUrls.getShopIndexInfo, {
					merchant_id: this.$store.getters.userInfo.id,
					date_selection: this.tabType
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						let info = res.data.data;
						this.orderStatistics = info.orderStatistics;
						this.order = info.order;
						this.myProduct = info.myProduct;
						this.certification_status = info.certification_status;
						this.store_star = info.store_star;
						this.store_status = info.store_status;
						this.main_industry = info.main_industry;
						this.level_name = info.level_name;
						this.expiration_time = info.expiration_time;
						this.shopLogo = info.shopLogo;
						this.shopName = info.shopName;
						this.uid = info.uid;
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	};
</script>

<style lang="scss">
	.page-user {
		background: #f6f6f6;
		height: 100vh;
	}

	//头部 start
	.header-title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;

		.header-left {
			font-size: 42rpx;
			color: #666;
		}

		.header-center {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			color: #333;
			letter-spacing: 1rpx;

		}

		.header-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333;
			letter-spacing: 1rpx;
			text-align: right;
		}

		view {
			width: 33.3%;
		}
	}

	//头部 end


	.user-section {
		width: 100%;
		height: 416rpx;
		position: relative;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		// background: -webkit-gradient(linear, left top, right top, from(#000), to(#666));
		// background: -webkit-linear-gradient(left, #000, #666);
		// background: linear-gradient(to right, #000, #666);

		.image {
			width: 100%;
			height: 100%;
		}
	}

	//金额信息 start
	.info_box {

		position: relative;
		z-index: 99;

		//金额
		.money-wrap {
			width: 100%;

			.money-content {
				width: 100%;
				padding-top: 58rpx;

				.money {
					width: 100%;
					text-align: center;
					font-size: 48rpx;
					font-family: Arial;
					font-weight: bold;
					color: #FFFFFF;
				}

				.desc {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					height: 53rpx;
					line-height: 55rpx;
				}

				.money-btn-wrap {
					height: 53rpx;
					line-height: 55rpx;
					margin-top: 40rpx;
					padding-bottom: 60rpx;
					display: flex;
					justify-content: center;

					.money-btn {
						text-align: center;
						width: 184rpx;
						height: 60rpx;
						background: #FFFFFF;
						opacity: 1;
						border-radius: 50rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6464;
						opacity: 1;
						line-height: 60rpx;
					}
				}
			}

		}

	}

	//金额信息 end


	.box-center {
		width: 100%;
		height: 73rpx;
		background: rgba(#FF6464, 0.08);
		padding: 0 32rpx;
		color: #FF6464;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.detaiLiat {
		position: relative;
		width: 100%;
		background-color: #fff;

		.list {
			.ongg {
				height: 140rpx;
				width: calc(100% - 64rpx);
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;

				.buy-left {
					flex: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 116rpx;
						height: 116rpx;
						border-radius: 10rpx;
						margin-right: 25rpx;
					}

					.share-right {

						line-height: 53rpx;
						flex: 1;

						.desc {
							font-size: 28rpx;
							font-family: 'PingFang SC';
							font-weight: 500;
							flex: 1;
							color: #333333;

						}

						.create_time {

							font-size: 24rpx;
							font-family: 'PingFang-SC-Regular';
							color: #999999;
							opacity: 1;
						}
					}
				}

				.price-right {
					font-size: 40rpx;
					font-family: Arial;
					font-weight: 500;
					line-height: 45rpx;
					// color: #F9522A;
					padding-right: 10rpx;
				}
			}
		}
	}

	// 头部 start
	.page-header {
		width: 100%;
		position: relative;

		.bg-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.shop-logo {
			padding: 0 20rpx;

			.img {
				width: 146rpx;
				height: 146rpx;
				border-radius: 146rpx !important;
			}
		}

		.shop-name {
			font-size: 36rpx;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			color: #333333;
		}

		.color-text {
			color: #333333;
		}
	}

	.header-info {
		position: relative;
		z-index: 1;
		padding: 60rpx 24rpx 24rpx 24rpx;
	}

	// 头部 end

	.level {
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding: 3rpx 10rpx;
		margin: 0 10rpx;
	}

	.auth {
		border: 1rpx solid #FFFFFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		padding: 3rpx 10rpx;
		margin: 0 10rpx;
	}

	.radius-16 {
		border-radius: 16rpx;
		overflow: hidden;
	}

	// 我的订单
	.my-order {
		image {
			width: 56rpx;
			height: 56rpx;
		}

		.item {
			position: relative;

			.jiaobiao {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				border-radius: 100rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 38rpx;
				text-align: center;
				background-color: #FF6464;
				z-index: 9;
				transform: scale(0.65);
			}
		}
	}

	.general-view {
		z-index: 99;
		position: relative;
	}

	.tab-box {
		border: 1rpx solid $bgtheme;
		// padding: 3rpx 0;
		border-radius: 4rpx;

		.tab-item {
			padding: 5rpx 8rpx;
			border-radius: 4rpx;
			// margin: 0 3rpx;
			font-size: 24rpx;
		}

		.active {
			background-color: $bgtheme;
			color: #FFFFFF;
		}
	}

	.color-red {
		color: #FB2A25;
	}

	.day-view {
		height: 40rpx;
		width: 102rpx;
		border-radius: 20rpx;
		border: 1rpx solid #707070;
		color: #333333;
	}

	.margin-tp {
		margin-top: 20rpx;
	}

	.padding {
		padding: 16rpx;
	}

	.margin-top-sm {
		margin-bottom: 16rpx;
	}
</style>